<template>
    <div ref="myChart"/>
</template>

<script>

export default {
    name: "BarChart",
    data() {
        return {
            seriesArray: [],
            option: {}
        }
    },
    methods: {
        initSeries(optionData) {
            let _this = this
            _this.option = optionData;

            let myChart = this.$root.$echarts.init(this.$refs.myChart);
            let option;

            option = {
                backgroundColor: 'rgba(11,32,53,0)',
                textStyle: {
                    color: '#FFFFFF',
                    opacity: 0.85
                },
                title: {
                    // text: '世界港口集装箱吞吐量排名',
                    text: _this.option.titleText,
                    textStyle: {
                        color: '#FFFFFF',
                        fontSize: '26px',
                        opacity: 1
                    },
                    subtext: _this.option.subText,
                    subtextStyle: {
                        color: '#ff6666',
                        fontSize: '16px',
                        opacity: 1
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    // show: true,
                    data: _this.option.legendData,
                    // data: ['2020年', '2019年'],
                    top: 'bottom',
                    itemWidth: 20,
                    textStyle: {
                        fontSize: 16,
                        color: '#FFFFFF'
                    }
                },
                grid: {
                    left: '5%',
                    right: '5%',
                    bottom: '8%',
                    top: '70',
                    containLabel: true
                },
                xAxis: {
                    type: 'value',
                    boundaryGap: [0, 0.01],
                    // name: '吞吐量：万TEU',
                    name: _this.option.xAxisName,
                    nameTextStyle: {
                        align: "right",
                        fontSize: 16
                    },
                },
                yAxis: {
                    type: 'category',
                    data: _this.option.yAxisData,
                    inverse: true
                },
                dataZoom: [{
                    type: "inside"
                }],
                series: _this.option.seriesData
            };

            option && myChart.setOption(option);
        }
    },
}
</script>

<style scoped>
</style>